<template>
  <Split :splitRatio="70">
    <template #left>
      <div ref="wf-container" id="wf-container"/>
    </template>

    <template #right>
      <div>
        <el-tabs v-model="activeTabName" class="demo-tabs" @tab-click="fTabClick">
          <el-tab-pane label="基本信息" name="first">
            <WfDesignBaseInfoSet @fWfDesignSaveCallback="fWfDesignSaveCallback"/>
          </el-tab-pane>

          <el-tab-pane label="表单控制" name="second">表单控制</el-tab-pane>
          <el-tab-pane label="参与人" name="third">
            <WfDesignJoinUsersSet/>
          </el-tab-pane>
          <el-tab-pane label="事件处理" name="fourth">事件处理</el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </Split>
</template>
<script>
import Split from '@/components/common/split.vue'
import commonFunc from '@/libs/common_func'
import {reactive, toRefs, onMounted, provide, useTemplateRef} from 'vue'
// 修改导入方式，使用命名导入
import LogicFlow from "@logicflow/core";
import {Control, Menu, DndPanel, ProximityConnect} from '@logicflow/extension'
import CustomStart from './custom_start.js'
import CustomStop from './custom_stop.js'
import CustomApprove from './custom_approve.js'
import CustomDiverge from './custom_diverge.js'
import CustomMerge from './custom_merge.js'
import wfPanel from './wf_panel_set.js'
import CustomText from './custom_text.js'
import CustomTimer from './custom_timer.js'

import '@logicflow/core/dist/index.css';
import '@logicflow/extension/lib/style/index.css'
import '@logicflow/core/es/index.css';
import '@logicflow/extension/es/index.css';

// 导入关联组件
import WfDesignBaseInfoSet from './wf_design_base_info_set.vue'
import WfDesignJoinUsersSet from './wf_design_join_users_set.vue'
// 导入测试表单
// import CreatedEdit  from '@/components/system-setting/button/create_edit.vue'

export default {
  name: "WfDesign",
  components: {
    Split,
    WfDesignBaseInfoSet,
    WfDesignJoinUsersSet,
    // CreatedEdit
  },
  props: {
    propWf: {
      type: Object,
      default: {}
    }
  },
  setup(props, context) {
    // const {propWf} = toRefs(props)

    let wfContainer = useTemplateRef('wf-container')

    const stateData = reactive({
      activeTabName: "first",
      wfBaseInfoSet: {
        form_file_name: '/src/components/system-setting/button/create_edit.vue',
        wf_no: 'wf-2025-001',
        wf_name: 'wf-测试工作流',
        wf_version: 'v1',
        wf_created_time: commonFunc.DatetimeFormat(),
        wf_updated_time: commonFunc.DatetimeFormat(),
        wf_remark: '开发调试中...',
      },
      renderData: {
        // 节点数据
        nodes: [
          // 节点数据属性：节点1
          // {
          //   id: 'node_id_1',
          //   type: 'rect',
          //   x: 50,
          //   y: 50,
          //   text: {x: 50, y: 50, value: '节点1'}, // 节点文本
          //   properties: {
          //     width: 80,
          //     height: 80,
          //     style: {
          //       stroke: 'blue',
          //     },
          //     isPass: 'true', //例如：在审批流场景，我们定义某个节点，这个节点通过了，节点为绿色，不通过节点为红色。
          //   },
          // },
          // // 节点2
          // {
          //   id: 'node_id_2',
          //   type: 'circle',
          //   x: 200,
          //   y: 300,
          //   text: {x: 300, y: 300, value: '节点2'},
          //   properties: {},
          // },
        ],
        edges: [
          // 边数据属性
          // {
          //   id: 'edge_id',
          //   type: 'polyline',
          //   sourceNodeId: 'node_id_1',
          //   targetNodeId: 'node_id_2',
          //   text: {x: 139, y: 200, value: '连线'}, // 连线文本
          //   properties: {},
          // },
        ]

      }
    })

    // 将需要的数据提供给子组件
    provide("wfBaseInfoSet", stateData.wfBaseInfoSet)

    const fTabClick = (tab, event) => {
      console.log("tab被点击事件：", tab, event)
    }
    // 保存工作流数据
    const fWfDesignSaveCallback = () => {
      console.log("工作流设计主界面 - 保存工作流数据", stateData.wfBaseInfoSet)
    }

    onMounted(() => {

      const wf = new LogicFlow({
        container: wfContainer.value,
        grid: {
          size: 12,
          visible: true,
          type: 'mesh',
          config: {
            color: '#dadfea',
            thickness: 1,
          },
        },
        plugins: [Control, Menu, DndPanel, ProximityConnect],
        themeMode: 'radius', // 设置圆角主题
        snapToGrid: true,
        // stopMoveGraph: true,  // 禁止移动画布
        keyboard: {
          enabled: true,
          shortcuts: [
            {
              // 增加 delete键 删除功能
              keys: ["delete"],
              callback: () => {
                const elements = wf.getSelectElements(true);
                wf.clearSelectElements();
                elements.edges.forEach((edge) => wf.deleteEdge(edge.id));
                elements.nodes.forEach((node) => wf.deleteNode(node.id));
              },
            },
          ],
        },
      })

      // 设置主题
      wf.setTheme({
        snapline: {
          stroke: '#1b3459', // 对齐线颜色
          strokeWidth: 1, // 对齐线宽度
        },
      })

      wf.on('node:click,edge:click', (data) => {
        // 根据节点类型，可以自定设置属性
        // data.data.properties.startAtTime = '2025-07-08 00:00:00'
        // data.data.properties.startAfterSecond = '3600'
        console.log("节点/边线被单击事件：", data)

      })

      // 注册自定义组件
      wf.register(CustomStart)
      wf.register(CustomStop)
      wf.register(CustomApprove)
      wf.register(CustomDiverge)
      wf.register(CustomMerge)
      wf.register(CustomText)
      wf.register(CustomTimer)

      wf.render(stateData.renderData) // 数据渲染
      wf.translateCenter(); // 将图形移动到画布中央

      // 拖拽面板的定义
      wfPanel.set(wf)

    })

    return {
      ...toRefs(stateData),
      fTabClick,
      fWfDesignSaveCallback
    }
  }
}
</script>


<style scoped>
#wf-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 5px;
  width: calc(100% - 10px);
  min-height: 700px;
  height: calc(100% - 10px);
}

.panel-start-icon .lf-dnd-shape {
  width: 20px; /* 设置图标宽度 */
  height: 20px; /* 设置图标高度 */
  object-fit: cover; /* 控制图片缩放方式 */
}
</style>